<div class="page devui-scrollbar" #scrollTarget>
  <h1 class="page-header" #header>This is Header.</h1>
  <div class="page-container">
    <div class="texts" #targetContainer>
      <h1>Getting Started</h1>
      <p>Guides: How to use DevUI in your project</p>
      <h2>1. Create a project</h2>
      <p>It is recommended to use &#64;angular/cli to create your project.</p>
      <p>$ ng new New-Project</p>
      <h2>2. Installation</h2>
      <p>Go to your project folder and use npm to install DevUI.</p>
      <h2>3. Import Modules</h2>
      <p>BrowserModule BrowserAnimationsModule NgModule DevUIModule AppComponent.</p>
      <h2>4. Import Styles</h2>
      <p>Add the devui style sheet to the angular.json file.</p>
      <h2>5. Start Development and Debugging</h2>
      <p>$ ng serve --open</p>
      <h1>DevUI Design</h1>
      <h2>Introduction</h2>
      <p>DevUI Design allows developers to focus exclusively on thinking about.</p>
      <h2>Purpose & Rules</h2>
      <h3>Design Resource</h3>
      <p>DevUI Design provides comprehensive design principles, best practices, design resource documents.</p>
      <h3>Who's using DevUI Design</h3>
      <p>DevUI Design provides comprehensive design principles, best practices, design resource documents.</p>
    </div>
  </div>
</div>

<d-nav-sprite
  #navSprite
  [scrollTarget]="scrollTarget"
  [target]="targetContainer"
  [height]="300"
  [width]="300"
  [title]="'scrollTarget Usage'"
  [mode]="'sprite'"
  [indent]="1"
  [view]="view"
  [isOpen]="false"
  [spriteOption]="spriteOption"
></d-nav-sprite>
